/*
 * @Description:
 * @Author:
 * @Date: 2024-10-04 22:31:44
 * @LastEditTime: 2024-10-05 02:10:05
 * @LastEditors: XXX
 */
customElements.define('xs-custom-demo1', class extends HTMLElement {
  constructor() {
    super()

    this.template = document.createElement('div')
    this.template.innerHTML = `
      <div class="xs-artical">
        <div class="xs-artical__img">
          <img src="/assets/imgs/test1.jpg">
        </div>

        <div class="xs-artical__user">
          <div class="xs-artical__user-avatar">
            <img src="/assets/avatar/avatar.jpg" alt="">
          </div>
          <div>
            <div class="xs-artical__user-name">宇宙小百科</div>
            <div class="xs-artical__user-time">2024-12-12 陕西</div>
          </div>
        </div>

        <div class="xs-artical__desc">
          1964年，苏联天文学家尼古拉·卡尔达舍夫构想了外星文明的水平，并通过掌握不同的能量控制技术对其进行了分类。从那时起，关于宇宙文明水平的讨论从未停止过。宇宙文明的七个层次是什么？它们是：母星文明、恒星文明、星系文明、星际文明、次元文明等。
        </div>
      </div>
    `


    // 创建一个style元素
    this.styles = document.createElement('style');
    // 添加CSS样式
    this.styles.innerHTML = `
      .xs-artical {
        margin: 30px;
        padding: 15px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
        overflow: hidden;
      }

      .xs-artical__img {
        margin-top: -30px;
        margin-right: -30px;
        margin-left: -30px;
      }

      .xs-artical__img img {
        width: 100%;
        display: block;
      }

      .xs-artical__user {
        display: flex;
        align-items: center;
        margin-top: 15px;
      }

      .xs-artical__user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 30px;
        overflow: hidden;
        margin-right: 15px;
      }

      .xs-artical__user-avatar img {
        width: 100%;
        height: 100%;
      }

      .xs-artical__user-name {
        font-size: 12px;
        color: #999;
      }

      .xs-artical__user-time {
        font-size: 12px;
        color: #999;
      }

      .xs-artical__desc {
        font-size: 14px;
        line-height: 1.5;
        margin-top: 15px;
      }
    `
    // this.appendChild(this.template)
    // this.appendChild(this.styles)
  }

  connectedCallback () {
    this.appendChild(this.template)
    this.appendChild(this.styles)
  }
})
